<template>
    <div id="globalHeader">
        <a-row :wrap="false">
            <a-col flex="200px">
                <div class="title-bar">
                    <img class="logo" src="@/assets/ilink_logo.png">
                    <h1>用户中心</h1>
                </div>
            </a-col>
            <a-col flex="auto">
                <a-menu v-model:selectedKeys="current" 
                mode="horizontal" 
                :items="items" 
                @click="doMenuClick"
                />
            </a-col>
            <a-col flex="80px">
                <div class="user-login-status">
                    <a-button type="primary" href="/user/login">登录</a-button>
                </div>
            </a-col>
        </a-row>
    </div>

</template>
<script lang="ts" setup>
import { h, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined, HomeOutlined } from '@ant-design/icons-vue';
import type { MenuProps } from 'ant-design-vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const doMenuClick = (e: { key: string }) => {
    router.push(e.key);
};

const current = ref<string[]>(['mail']);
const items = ref<MenuProps['items']>([
    {
        key: '/',
        icon: () => h(HomeOutlined),// 主页图标
        label: '主页',
        title: 'home',
    },
    {
        key: '/user/login',
        icon: () => h(AppstoreOutlined),// 应用图标
        label: '用户登录',
        title: 'login',
    },
    {
        key: '/user/register',
        icon: () => h(SettingOutlined),// 设置图标
        label: '用户注册',
        title: 'register',
    },
    {
        key: '/user/manage',
        icon: () => h(MailOutlined),// 邮件图标
        label: '用户管理',
        title: 'manage',
    },
    {
        key: 'alipay',
        label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
        title: 'Navigation Four - Link',
    },
]);
</script>

<style scoped>
.title-bar {
    display: flex;
    align-items: center;
    background-color: rgb(6, 145, 237);
    padding:5.5px;
}

.title {
    margin-left: 16px;
    padding: 20px;
    font-size: 24px;
    font-weight: bold;
    color: skyblue;
    margin-left: 16px;
}

.logo {
    height: 36px;
}

.user-login-status {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
</style>